<template>
  <div :style="styleSheet">
      <slot></slot>
  </div>
</template>

<script>
export default {
    props:{
        styles:{
            type:Object,

        }
    },
    computed:{
        activeHeight:function(){
            var docElement = document.documentElement;
            var clientHeight = docElement.clientHeight;
            var clientWidth = docElement.clientWidth;
            if(!clientWidth) return;
            var fontSize = 20 * (clientWidth / 320);
            if(this.$route.meta.isShowNav){
                clientHeight-=3.2*fontSize
            }
            
            if(this.$route.meta.isShowTab){
                clientHeight-=3.2*fontSize

            }
            return clientHeight/fontSize+'rem';
        },
        styleSheet:function(){
            return{
                marginTop:this.$route.meta.isShowNav?'3.2rem':'0px',
                marginBottom:this.$route.meta.isShowTab?'3.2rem':'0px',
                // border:'1px solid red',
                height:this.activeHeight,
                ...this.styles
            }
        }
    }

}
</script>

<style>

</style>